import QtQuick 2.0
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.3
import Quick.UIComponent.Text.Normal 0.1

Rectangle {
    id:root
    signal clicked

    signal firstClicked
    signal secondClicked

    readonly property int   borderWidth:2
    readonly property color hoverdColor: "#21be2b"
    readonly property color pressColor: "#00fa9a"
    readonly property color clickedColor: "#ff00ff"
    readonly property color borderColor :"white"


    property bool borderVisible

    property color backGroud
    property string btnName
    property bool doubleClick:false
    property bool doubleClicked:false



    implicitHeight: 48
    width: 128
    radius: 6
    color: backGroud
    border.width: borderVisible?borderWidth:0
    border.color:borderColor


    MText{
        text: btnName
        anchors.centerIn: parent
        pxSize: 18
        textColor: "white"
    }


    MouseArea{
        id:mouse
        anchors.fill: parent
        cursorShape: (root.state != "normal")?  Qt.PointingHandCursor:
                                   Qt.ArrowCursor
        hoverEnabled: true

        onClicked: {
            if(doubleClick){
                doubleClickJudge()
            }else{
                singleClickedJudege()
            }
        }
        property bool clickedButton: false;
        onPressed: {
            root.state = "pressed"
        }

        onReleased: {
            if(mouse.containsMouse)
                root.state = "hovered"
        }

        onEntered: {
            if(root.state != "clicked")
            root.state = "hovered"
        }

        onExited: {
            if(root.state != "clicked")
                root.state = "normal"
        }
    }

    states: [
        State {
            name: "hovered"
            PropertyChanges {
                target: root
                color: hoverdColor
                borderVisible:false
            }
        },
        State {
            name: "normal"
            PropertyChanges {
                target: root
                color: backGroud
                focus:false
                borderVisible:true
            }
        },
        State {
            name: "pressed"
            PropertyChanges {
                target: root
                focus:true
                color: pressColor
                borderVisible:false
            }
        } ,
        State {
            name: "clicked"
            PropertyChanges {
                target: root
                focus:true
                color: clickedColor
                borderVisible:false
            }
        }

    ]

    function doubleClickJudge(){
        if(!root.doubleClicked){
            root.state = "clicked"
            emit:root.firstClicked()
        }else{
            root.state = "normal"
            emit:root.firstClicked()
        }
        root.doubleClicked = !root.doubleClicked
    }
    function singleClickedJudege(){
        emit:root.clicked()
    }


    Component.onCompleted: {
        root.state = "normal"
    }
}
